﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>多选树测试</title>
<!-- 以下三个基础库必须 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../base/javascript/ext-core-min.js"></script>
<!--数据js文件 -->
<script type="text/javascript" src="JobCategories.js"></script>
<!-- 以下为自定义组件-->
<script type="text/javascript" src="../WindowLite/javascript/windowlite.js"></script>
<script type="text/javascript" src="javascript/multiTree.js"></script>
<!--以下为css -->
<!-- 核心css，必须-->
<link rel="stylesheet" type="text/css" href="../base/css/core.css" />
<!-- 自定义组件的css-->
<link rel="stylesheet" type="text/css" href="../WindowLite/css/windowlite.css" id="skinCss" />
<link rel="stylesheet" type="text/css" href="css/multiTree.css" />
<script type="text/javascript">
	
Ext.onReady(function() {
	var mtree = new Ext.ux.MultiTree({
		//树状数据
		data:theJobCategories,
		//初始选择的节点
        selectedNodes:['5001','5004','测试','510101'],
        //是否支持用户调节大小
        resizable:true,
        width:680,//680
        height:510,//505
        //最多选择个数
        limit:5,
        //是否支持拖放,请载入 DDCore-min.js
        drag:true,
        title:'请选择职位',   
        //第三级弹出框是否限制在tree容器内，否则以箭头对其
        //constrain:true,
        //是否模态窗口
        //modal:true,
        shadow:'frame',//默认sides
		shadowOffset:6,//默认4
		//是否允许最大化窗口
        maximizable:true
   });
	
	mtree.on('ok',function() {
      alert('ok clicked : '+mtree.getSelectKeys());
      mtree.hide();
  });
		
		
	mtree.on('cancel',function() {
             //alert('cancel clicked');
             //不隐藏窗口，不return false 就默认隐藏窗口
             //return false;
  });
  
  mtree.multiTreeWin.on('hide',function(){
  	//alert('窗体隐藏了');
  });
  
  
   mtree.multiTreeWin.on('beforehide',function(){
  	 //if(!confirm('是否隐藏'))
  	 //		return false;
  });
  
    Ext.fly('action_b').on('click', function() {
    	  alert(mtree.getSelectKeys());
       
    });
    Ext.fly('action_a').on('click', function() {
        mtree.multiTreeWin.show(Ext.fly('action_a'));
    });


		Ext.get("skin").dom.value="../windowlite/css/windowlite.css";
	
	function swapStyleSheet(cssId,url){
		var doc=document;
		var existing = doc.getElementById(cssId);
    if(existing){
        existing.parentNode.removeChild(existing);
    }
    
    var ss = doc.createElement("link");
    ss.setAttribute("rel", "stylesheet");
    ss.setAttribute("type", "text/css");
    ss.setAttribute("id", cssId);
    ss.setAttribute("href", url);
    doc.getElementsByTagName("head")[0].appendChild(ss);
	}
	Ext.get("skin").on("change",function(){
		swapStyleSheet("skinCss",this.getValue());
	});
	
	
		
/*
    Ext.fly('action_c').on('click', function() {
        (mtree.hide());
    });
    
    <button id='action_c'> 隐藏</button>

*/   

       
});
</script>
</head>
<body>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<button id='action_b'> 查看已选择</button>
<button id='action_a'> 显示</button>
<div style="margin:20px;">
	选择皮肤：
	
	<select id="skin">
		<option value="../WindowLite/css/windowlite.css">extjs</option>
		<option value="../WindowLite/css/aol/windowlite.css">aol</option>
		
	</select>	
</div>	



</body>
</html> 